<template>
  <d2-container>
    <el-card shadow="never">
      <el-form ref="egForm" :model="egForm" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="策略ID:">
                <el-input v-model="strategy_id" />
              </el-form-item>
            <el-form-item label="策略名称:">
                <el-input v-model="egForm.strategy_name" />
              </el-form-item>
          </el-col>
          <el-col :span="10">
            <!-- <el-form-item label="日期:">
              <el-date-picker
                type="date"
                v-model="egForm.date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                 style="width: 100%;"
              ></el-date-picker>
            </el-form-item> -->
             <el-form-item label="日期:">
              <el-date-picker
                type="date"
                v-model="egForm.start_date"
                placeholder="开始日期"
                value-format="yyyy-MM-dd"
                clearable
              ></el-date-picker>
              -
              <el-date-picker
                type="date"
                v-model="egForm.end_date"
                placeholder="结束日期"
                value-format="yyyy-MM-dd"
                clearable
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="line-height: 100px;">
            <el-button size="small" @click="$router.go('-1')">返回上级</el-button>
            <el-button size="small" @click="select_fn()">查询</el-button>
            <el-button size="small">导出</el-button>
            <el-button size="small">打印</el-button>
          </el-col>
        </el-row>
      </el-form>
      <h4 style="text-align:center">策略资金占用表</h4>
      <el-table
        border
        :data="tableData"
        :cell-style="{ 'text-align': 'center' }"
        :header-cell-style="{ 'text-align': 'center' }"
        style="width: 100%"
      >
        <el-table-column label="序号" type="index" width="50"></el-table-column>
        <el-table-column prop="date" label="日期"></el-table-column>
        <el-table-column prop="strategy_id" label="策略ID"></el-table-column>
        <el-table-column prop="strategy_name" label="策略名称"></el-table-column>
        <el-table-column label="衍生品">
          <el-table-column prop="margin" label="保证金"></el-table-column>
          <el-table-column prop="commission" label="手续费"></el-table-column>
          <el-table-column prop="feeF" label="费用"></el-table-column>
          <el-table-column prop="sumF" label="小计"></el-table-column>
        </el-table-column>
        <el-table-column label="现货">
          <el-table-column prop="costS" label="货款"></el-table-column>
          <el-table-column prop="CapS" label="资金成本"></el-table-column>
          <el-table-column prop="feeS" label="费用"></el-table-column>
          <el-table-column prop="sumS" label="小计"></el-table-column>
        </el-table-column>
        <el-table-column prop="total" label="合计"></el-table-column>
        <el-table-column prop="currency" label="币种"></el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="egForm.page"
          :page-size="egForm.pageSize"
          layout="total, prev, pager, next, jumper"
          :total="egForm.pageTotal"
        >
        </el-pagination>
      </div>
    </el-card>
  </d2-container>
</template>
<script>
import { getReport_strategy_caps } from '@/api/url'
export default {
  data() {
    return {
      strategy_id:'',
      egForm:{
        strategy_id:'',
        strategy_name:'',
        start_date:'',
        end_date:'',
        page: 1,
        pageSize: 20,
        pageTotal: 0
      },
      tableData: []
    };
  },
  created(){
    this.select_tableData()
  },
  methods: {
    handleCurrentChange(val) {
      this.egForm.page=val
      this.select_tableData()
    },
    select_tableData(){
      if(this.strategy_id==''){
        this.egForm.strategy_id=0
      }else{
        this.egForm.strategy_id=this.strategy_id
      }
      getReport_strategy_caps(this.egForm).then(res =>{
        this.tableData=res.result.results
        this.egForm.pageTotal=res.result.count
      })
    },
    select_fn(){
      this.egForm.page=1
      this.select_tableData()
    }
  }
};
</script>
<style scoped>
.el-pagination {
  text-align: center;
}
</style>
